import {
  type Preset,
  defineConfig,
  presetUno,
  presetIcons,
  presetAttributify,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";
import {
  presetApplet,
  presetRemRpx,
  transformerAttributify,
} from "unocss-applet";

const isMp = process.env?.UNI_PLATFORM?.startsWith("mp") ?? false;

const presets: Preset[] = [];
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx());
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify()
  );
}

export default defineConfig({
  presets: [
    ...presets,
    // 支持图标
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
      collections: {
        mdi: () =>
          import("@iconify-json/mdi/icons.json").then((i) => i.default),
      },
    }),
  ],
  transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
    // Don't change the following order
    transformerAttributify({
      // 解决与第三方框架样式冲突问题
      prefixedOnly: true,
      prefix: "fg",
    }),
  ],
  shortcuts: [
    // { 'center': 'flex justify-center items-center' },
    // 标题尺寸
    // { 'title-sm': 'text-sm font-bold' },
    // { 'title': 'text font-bold' },
    // { 'title-lg': 'text-lg font-bold' },
    // { 'title-xl': 'text-xl font-bold' },
    // { 'title-2xl': 'text-2xl font-bold' },
    // { 'title-4xl': 'text-4xl font-bold' },
    // { 'title-6xl': 'text-6xl font-bold' },
    // 添加图标尺寸
    // { "icon-sm": "flex-shrink-0 w-4 h-4" },
    // { "icon-base": "flex-shrink-0 w-6 h-6" },
    // { "icon-lg": "flex-shrink-0 w-8 h-8" },
    // { "icon-xl": "flex-shrink-0 w-10 h-10" },
    // { "icon-2xl": "flex-shrink-0 w-12 h-12" },
    // { "icon-4xl": "flex-shrink-0 w-14 h-14" },
    //
    // { 'section-split': 'flex-shrink-0 w-full h-2 bg-gray-100' }
  ],
  rules: [
    [
      "p-safe",
      {
        padding:
          "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)",
      },
    ],
    ["pt-safe", { "padding-top": "env(safe-area-inset-top)" }],
    ["pb-safe", { "padding-bottom": "env(safe-area-inset-bottom)" }],
  ],
});
